<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta name="_token" content="{{ csrf_token() }}"/>
    <link href="/css/css.css" rel="stylesheet" type="text/css" />
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://static.geetest.com/static/golden/style.3.0.23.css"rel="stylesheet" />
</head>

<body class="bj">
  <section>
       <div class="head">
            <p class="head_top">
                <img src="img/x_03.png">
            </p>
           <div class="head_btn">
               <span class="head_1">文字直播间</span>
               <span class="head_2">登陆账号</span>
               <div class="head_right">
                    <span>我未注册，现在就</span>
                   <a href="/reg"><span>注册</span></a>
               </div>
           </div>
       </div>
      <div class="body">
          <div class="col-sm-9">
              <div class="input-group">
                  <span class="input-group-addon denglu_user">
                      <img src="img/denglu_user_03.png">
                  </span>
                  <span class="input-group-addon1">手机号码：</span>
                  <input type="text" class="form-control" id="mobile" aria-describedby="inputGroupSuccess2Status" />
              </div>
              <div class="input-group">
                  <span class="input-group-addon denglu_user">
                      <img src="img/denglu_suo_03.png">
                  </span>
                  <span class="input-group-addon1">用户密码：</span>
                  <input type="password" class="form-control" id="pwd" />
              </div>
              <div class="yanzhengma">
                  <div id="embed-captcha" class="formControls col-xs-8 col-xs-offset-3" style="width: 100%;"></div>
                  <p id="wait" class="show" style="text-align: center;">正在加载验证码......</p>
                  <p id="notice" class="hide" style="text-align: center;color:#f33;line-height: 40px;">请先拖动验证码到相应位置</p>
              </div>
          </div>
          <div class="checkbox">
              <label>
                  <input type="checkbox" id="autologin" />
                  <span>下次自动登陆</span>
              </label>
          </div>
          <div class="buttom">
              <a id="login">登陆</a>
          </div>
          <div class="body_foot">
              <div class="body_foot_left">使用合作账号登陆</div>
              <div class="body_foot_right">
                   <ul>
                       <li><img src="img/weix_03.png"></li>
                       <li><img src="img/weib_03.png"></li>
                       <li><img src="img/qq_03.png"></li>
                   </ul>
              </div>
              <div class="clear"></div>
          </div>
      </div>
  </section>
</body>
<script type="text/javascript" src="/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/layer/2.1/layer.js"></script>
<script type="text/javascript" src="http://static.geetest.com/static/tools/gt.js"></script>
<script type="text/javascript">
    $(function(){
        $(".form-control").focus(function () {
            $(this).parent().css("box-shadow","0 0 3px 3px #ffffff");
        }).blur(function () {
            $(this).parent().css("box-shadow","none");
        });
        $(document).keydown(function (e) {if(e.keyCode == 13){$("#login").click();}});

        var handlerEmbed = function (captchaObj) {
            $("#login").click(function (e) {
                var validate = captchaObj.getValidate();
                if (!validate) {
                    $("#notice").attr("class", "show");
                    setTimeout(function () {
                        $("#notice").attr("class", "hide");
                    }, 2000);
                    return false;
                }
                var mobile = $("#mobile");
                var pwd = $("#pwd");
                if (mobile.val() == ''){
                    layer.msg('请填写手机号',{icon: 2, time: 1000}, function () {
                        mobile.focus();
                    });
                    return false;
                }
                if (pwd == ''){
                    layer.msg('请填写登录密码',{icon: 2, time: 1000}, function () {
                        pwd.focus();
                    });
                    return false;
                }
                $.ajax({
                    type:'post',dataType:'json',cache:false,
                    url:'/do_login',
                    headers: {
                        'X-CSRF-TOKEN': $("meta[name='_token']").attr('content')
                    },
                    data:{
                        'challenge': validate.geetest_challenge,
                        'validate': validate.geetest_validate,
                        'seccode': validate.geetest_seccode,
                        'mobile':mobile.val(),
                        'pwd':pwd.val()
                    },
                    success:function (data) {
                        if(data.status == 0){
                            layer.msg(data.info, {icon: 1, time: 800}, function () {
                                window.location.href = '/';
                            });
                        }else{
                            layer.msg(data.info, {icon: 2})
                        }
                    },
                    error:function () {
                        alert('服务器错误');
                    }
                });
            });
            // 将验证码加到id为captcha的元素里
            captchaObj.appendTo("#embed-captcha");
            captchaObj.onReady(function () {
                $("#wait")[0].className = "hide";
            });
        };
        $.ajax({
            // 获取id，challenge，success（是否启用failback）
            type: "get", dataType: "json",
            url: "/captcha?t=" + (new Date()).getTime(), // 加随机数防止缓存
            success: function (data) {
                // 使用initGeetest接口
                // 参数1：配置参数
                // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
                initGeetest({
                    gt: data.gt,
                    challenge: data.challenge,
                    product: "float", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                    offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                }, handlerEmbed);
            }
        });
    });
</script>
</html>